<template>
  <el-form-item>
    <el-button type="primary" @click="emits('search')">查询</el-button>
    <el-button type="default" @click="emits('reset')">重置</el-button>
  </el-form-item>
  <el-form-item v-if="layoutButtons.length > 0" class="last-form-item">
    <el-button
      v-for="btn in layoutButtons"
      :key="btn"
      :type="buttonConfig[btn].type"
      @click="emits(buttonConfig[btn].event)"
    >
      {{ buttonConfig[btn].text }}
    </el-button>
  </el-form-item>
</template>

<script setup>
const props = defineProps({
  layout: {
    type: String,
    default: 'add, import, export, exportAll, batchDelete, downloadTemplate'
  }
})
const emits = defineEmits([
  'search',
  'reset',
  'add',
  'import',
  'export',
  'exportAll',
  'batchDelete',
  'downloadTemplate'
])

const layoutButtons = computed(() => {
  return props.layout.split(',').map(item => item.trim())
})
const buttonConfig = {
  add: { text: '新增', type: 'primary', event: 'add' },
  import: { text: '导入', type: 'success', event: 'import' },
  export: { text: '导出', type: 'info', event: 'export' },
  exportAll: { text: '全部导出', type: 'info', event: 'exportAll' },
  batchDelete: { text: '批量删除', type: 'danger', event: 'batchDelete' },
  downloadTemplate: { text: '下载模板', type: 'info', event: 'downloadTemplate' }
}
</script>
